<template>
	<view class="reservation page bgfd">
		<view class="r40 flex flexC flex1 bgf2 px12 py9 mx15 mt15 mb11">
			<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
			<input  class="pl8 flex1 fs12" v-model="keyword" confirm-type="search" type="text"
				placeholder="搜索门店">
			<text class="px6 cdc">|</text>
			<text class="c33 fs14" @click="search">搜索</text>
		</view>
		<scroll-view scroll-y class="list c66 bgfd boxS">
			<reservation-item @clickApply="clickJoin" v-for="(item,index) in list" :item="item" :key="index"></reservation-item>
			<view class="py5"></view>
		</scroll-view>
		<view class="flex flexC c33 w-20 bgff px15 pt12 pb30 boxS shadow">
			<text @click="clickHistory" class="fs21 bold6 mr5">≡</text>
			<text @click="clickHistory" class="fs14 flex1">邀约记录</text>
			<button @click="clickApply"  class="r40 fs16 bgfad px30">我要约人</button>
		</view>
		<uni-popup type="center" ref="confirmPopup">
			<view class="confirmPopup bgff pb28 c00 flex flexCol r12 px32">
				<view class="aliC cover">
					<image class="r50" src="/static/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="fs18 bold6 py8 mb12 borb aliC">应约提示</view>
				<view class="my4">店铺:{{currentItem.shop_name}}</view>
				<view class="my4">时间:{{currentItem.start_time_txt}}</view>
				<view class="my4">预约金额:5元</view>
				<view class="flex flexC btns mt20">
					<view class="cancelbtn r40 fs18 mx12" @click="$refs.confirmPopup.close()">取消</view>
					<view  class="confirmbtn r40 fs18 mx12" @click="joinPay">应约</view>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				currentItem:null,
				keyword:''
			};
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			this.$nextTick(() => {
				//this.$refs.confirmPopup.open();
			})
		},
		methods:{
			
			search(){
				
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.list = [];
				this.getData();
			},
			
			joinPay(){
				
				let param = {
					id:this.currentItem.id
				};
				let that = this;
				this.$api.joinYue(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.wechatPay(res.data.payInfo);
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
						uni.redirectTo({
							url: '../reservation/list'
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "取消",
							icon: 'none'
						});
					}
				});
			},
			
			
			
			clickJoin(item){
				this.$refs.confirmPopup.open();
				this.currentItem = item;
			},
			
			getData(){
				
				let param = {
					page: this.page,
					lat:uni.getStorageSync("lat"),
					lng:uni.getStorageSync("lng"),
					keyword:this.keyword
				};
				let that = this;
				this.$api.yueList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {
				
					}
				})
				
			},
			
			clickHistory(){
				uni.navigateTo({
					url:'../reservation/list'
				})
			},
			
			clickApply(){
				uni.navigateTo({
					url:'../reservation/apply'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgfd {background-color: #FDFDFD;}
	.reservation {
		.confirmPopup {
			width: 78%;
			margin-left: .8%;
			.cover {
				position: relative;
				margin-top: -40rpx;
				image {
					width: 116rpx;
					height: 116rpx;
				}
			}
		
			.btns {
				.cancelbtn {
					width: 192rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #C3C3C3;
					color: #C3C3C3;
					background-color: #fff;
					box-sizing: border-box;
				}
		
				.confirmbtn {
					width: 192rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #FFE100;
					background-color: #FFE100;
					box-sizing: border-box;
					color: #232323;
				}
			}
		}
		.cdc {color: #dcdcdc;}
		.sear {
			width: 24rpx;
			height: 24rpx;
		}
		.list {
			height: calc(100vh - 272rpx);
		}
		
		.bgfad {
			background-color: #FAD00D;
		}
	}
</style>
